<template>
  <view class="personal_class">
    <view class="title">
      {{classData.title}}
    </view>
    <view class="course">
      <ul @click="toClass">
        <li class="course_item item_mask" v-for="course in classData.course" :key="course.id" :data-id="course.id">
          <image :src="course.image_url"></image>
          <view class="course_info">
            <p class="title">{{course.title}}</p>
            <p class="intro">{{course.introduce}}</p>
          </view>
        </li>
      </ul>
    </view>
  </view>
</template>

<script>
  import {toClass} from "@/utils/common.js"
  export default {
    data() {
      return {
        id: '',
        classData: {
          title: '订阅课程',
          course: [{
              id: 4010,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/05.jpg'
            },
            {
              id: 4011,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/06.jpg'
            },
            {
              id: 4012,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/03.jpg'
            },
            {
              id: 4013,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/04.jpg'
            },
            {
              id: 4014,
              title: '高等数学',
              introduce: "风声雨声读书声",
              image_url: 'http://120.46.150.252:10004/static/images/02.jpg'
            },
          ]
        }
      };
    },
    onLoad(option) {
      console.log(option.id);
    },
    methods: {
      toClass(e) {
        return toClass(e.target.dataset.id)
      },
    }
  }
</script>

<style lang="less">
  .personal_class {
    .course {
      // margin-top: 200rpx;
      padding: 20rpx 20rpx 0 20rpx;

      // 遮罩层
      .item_mask {
        position: relative;
      }

      .item_mask::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }

      .course_item {
        margin: 20rpx 0;
        padding: 30rpx 20rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 50rpx;
        box-shadow: 2rpx 2rpx 2rpx 2rpx #e2e2e2;

        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 20rpx;
        }
      }

      .course_info {
        height: 120rpx;
        padding: 10rpx 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 48rpx;
          font-weight: 600;
        }
      }
    }
  }
</style>
